<template>
  <div class="states">
    <Form :model="formItem" :label-width="80">
      <Row>
        <Col span="6">
        <FormItem label="收费状态">
          <CheckboxGroup v-model="formItem.checkbox" @on-change="getMsg()">
            <Checkbox :label="0">未收费</Checkbox>
            <Checkbox :label="1">已收费</Checkbox>
          </CheckboxGroup>
        </FormItem>
        </Col>
        <Col span="6">
        <FormItem label="时间筛选">
          <DatePicker type="date" placeholder="选择时间" :value="formItem.date" v-model="formItem.date" @on-change="screenOut"></DatePicker>
        </FormItem>
        </Col>
        <Col span="6">
        <FormItem label="查找">
          <Input v-model="formItem.phone" placeholder="填写姓名或手机号">
          <Button slot="append" icon="ios-search" @click="phoneFund"></Button>
          </Input>
        </FormItem>

        </Col>
      </Row>
    </Form>
    <div class="f_div" :key="item.dossierId" v-for="item in datas">
      <div :class="['left', {'true_bg':item.outputStatus==2},{'false_bg':item.outputStatus==1},{'wait_pay':item.outputStatus==0}]">
        <div class="main_left">
          <img class="img" v-if="item.sex=='男'" src="http://image.chenliangliang.xin/male-avatar" alt="" />
          <img class="img" v-else src="http://image.chenliangliang.xin/female-avatar" alt="" />
        </div>
        <div class="main_right">
          <p>
            <span class="span_name">{{ item.username }}</span>
            <span>（{{ item.sex }} {{ item.age }}岁）</span>
          </p>
          <p>
            药品：{{ item.summary }}
          </p>
          <p>
            <span v-if="item.outputStatus==1">待取药/</span>
            <span v-else>已完成 /</span>
            <span> {{ item.updateTime }} / </span>
            <span v-if="item.orderStatus == 0">未支付</span>
            <span v-else>已支付</span>
          </p>
          <p>
            开单医生：{{ item.doctor }}
          </p>
        </div>

      </div>
      <div class="isGet" @click="goTo(item.dossierId)">
        <a href="#">

          <p v-if="item.outputStatus==0">
            待支付
          </p>
          <p v-if="item.outputStatus==2">
            已完成
          </p>
          <p v-if="item.outputStatus==1">
            待发药
          </p>
        </a>
      </div>

    </div>
  </div>
</template>

<script>
import pharmacy from "../api/pharmacy";
export default {
  data() {
    return {
      isPay: [],
      left: "left",
      isTrue: true,
      datas: [],
      allData: [],
      formItem: {
        checkbox: [0,1],
        data: "",
        phone: "",
        date: ""
      }
    };
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    getData() {
      let date = new Date();
      let year = date.getFullYear();
      let mouth = date.getMonth() + 1;
      let day = date.getDay() + 1;
      let time = year + "-" + mouth + "-" + day;

      // username: this.formValidate.name,
      let query = "";
      pharmacy.get(time, query).then(res => {
        //    console.log(res.data.records)
        // 将获取到的json传入data1中
        this.allData = res.data.list;
        this.filterData();
      });
    },
    filterData() {
      this.datas = this.allData.filter(index => {
        for (let i of this.formItem.checkbox) {
          if (i == index.outputStatus) return true;
        }
        return false;
      });
    },
    screenOut(daterange) {
      // console.log(daterange)
      let query = this.formItem.phone;
      // console.log(query)
      pharmacy.get(daterange, query).then(reps => {
        if (reps.flag) {
          this.allData = res.data.list;
          this.filterData();
        } else {
          // this.
        }
      });
    },
    goTo(id) {
      this.$router.push({ name: "personMed", params: { id: id } });
    },
    phoneFund() {
      let query = this.formItem.phone;
      let date = "";
      pharmacy.get(date, query).then(reps => {
        if (reps.flag) {
          this.allData = reps.data.list;
          this.filterData();
        } else {
          // this.
        }
      });
    },
    payMent() {
      console.log(this.formItem.checkbox);
      if (e == 1) {
        for (item in this.datas) {
          if (item.orderStatus == 1) {
            this.isPay = this.isPay;
          } else {
            this.isPay = !this.isPay;
          }
        }
      } else {
        for (item in this.datas) {
          if (item.orderStatus == 1) {
            this.isPay = !this.isPay;
          } else {
            this.isPay = this.isPay;
          }
        }
      }
    },
    getMsg() {
      this.filterData();
    }
  }
};
</script>


<style>
.states {
  width: 100%;
  height: 50px;
  /* background-color: red; */
}
.f_div {
  float: left;
  margin: 20px;
}

.left {
  width: 400px;
  height: 130px;
  color: white;
}
.wait_pay {
  background-color: rgb(179, 69, 206);
}
.true_bg {
  background-color: #458ece;
}
.false_bg {
  background-color: #d65e5e;
}
.main_left {
  float: left;
}
.main_right {
  float: left;
  margin-top: 20px;
  width: 300px;
}
.main_left .img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin: 20px 0 0 20px;
}
.main_right p {
  margin: 20px 0 0 20px;
  font-size: 700;
  line-height: 0px;
}
.span_name {
  font-size: 18px;
  color: white;
}
.isGet {
  width: 400px;
  height: 60px;
  background-color: #f7f7f7;
}
.isGet p {
  color: #888;
  line-height: 60px;
  text-align: center;
}
</style>


